<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>注册</title>
<%@ include file="commonLib.jsp"%>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/register.css'/>" />
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-3 col-lg-4 col-sm-2"></div>
			<div class="col-md-6 col-lg-4 col-sm-8">
				<div class="register-title">
					精准微课堂<br />
					<h2>欢迎注册！</h2>
				</div>
				<br />
				<div class="row">
					<div class="col-xs-1 col-sm-1"></div>
					<div class="col-md-12 col-xs-10 col-lg-12 col-sm-10">
						<form>
							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="account">身份</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<select id="role" class="form-control" onchange="select()">
											<option value="TEACHER">教师</option>
											<option value="ASSISTANT">助教</option>
<%--											<option value="STUDENT">学生</option>--%>
										</select>
									</div>
									<div class="col-md-2 col-xs-3 col-sm-2 warn">*必填</div>
								</div>
							</div>
							
							<div class="form-group" id="class">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="">班级</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<input type="text" class="form-control" name="classNumber"
											placeholder="班级">
									</div>
									<div class="col-md-2 col-xs-3 col-lg-2 col-sm-2 warn">*必填</div>
								</div>
							</div>
							
							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="account">教工号/学号</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<input type="text" class="form-control" name="userCode"
											placeholder="教工号/学号">
									</div>
									<div class="col-md-2 col-xs-3 col-lg-2 col-sm-2 warn">*必填</div>
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="text">密码</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<input type="password" class="form-control" name="password"
											placeholder="密码">
									</div>
									<div class="col-md-2 col-xs-3 col-sm-2 warn">*必填</div>
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="name">姓名</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<input type="text" class="form-control" name="name"
											placeholder="姓名">
									</div>
									<div class="col-md-2 col-xs-3 col-sm-2 warn">*必填</div>
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="sex">性别</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<select id="gender" class="form-control">
											<option value="MALE">男</option>
											<option value="FEMALE">女</option>
										</select>
									</div>
									<div class="col-md-2 col-xs-3 col-sm-2 warn">*必填</div>
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="phone">电话</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<input type="tel" class="form-control" name="mobilePhone" placeholder="电话">
									</div>
									<div class="col-md-2 col-xs-3 col-sm-2 warn">*必填</div>
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="email">邮箱</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<input type="email" class="form-control" name="email"
											placeholder="邮箱">
									</div>
									<div class="col-md-2 col-xs-3 col-sm-2 warn">*必填</div>
								</div>
							</div>

							<div class="form-group">
								<div class="row">
									<div class="col-md-4 col-xs-6 col-sm-4">
										<label for="qq">QQ</label>
									</div>
									<div class="col-md-6 col-xs-9 col-sm-6">
										<input type="text" class="form-control" name="qq" placeholder="QQ">
									</div>
								</div>
								<div class="col-md-2 col-xs-3 col-sm-2"></div>
							</div>
						</form>
					</div>
					<div class="col-xs-1 col-sm-1"></div>

				</div>
				<br />
				<div class="row">
					<div class="col-md-3 col-xs-3"></div>
					<div class="col-md-6 col-xs-6" >
						<button type="submit" id="register" class="btn btn-primary">注册</button>
					</div>
					<div class="col-md-5 col-xs-5"></div>
				</div>
				<br /> <br />
			</div>
			<div class="col-md-3 col-lg-4 col-sm-2"></div>
		</div>
	</div>
</body>
<script>

$(document).ready(function(){
	 $("#register").on("click",registerEvent);
	 $("#class").hide();
})
var select = function() {
	var role = $("#role option:selected").val();
	if(role!="STUDENT") {
		$("#class").hide();
	} else {
		$("#class").show();
	}
}
var isNull = function(string){
	if(string == null || string.trim() == ""){
		return true;
	}else {
		return false;
	}
}
var registerEvent=function(){
	var role=$("#role  option:selected").val();
	var classNumber =$("input[name='classNumber']").val();
	var userCode =$("input[name='userCode']").val();
	var password =$("input[name='password']").val();
	var name =$("input[name='name']").val();
	var mobilePhone =$("input[name='mobilePhone']").val();
    var regph=/^[1][3,4,5,6,7,8][0-9]{9}$/;

    //教工号长度校验
    if(userCode.length!=10){
		layer.alert("教工号格式不正确！");
        return false
    }

    //电话号格式校验
    if(!regph.test(mobilePhone)){
        // layer.msg("手机号格式不正确")
		layer.alert("手机号格式不正确！");
        return false
    }


	var email =$("input[name='email']").val();

    //邮箱格式校验
    var regemail=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
    if(!regemail.test(email)){
		layer.alert("邮箱格式不正确！");
        return false;
    }

	var qq =$("input[name='qq']").val();
	var gender =$("#gender  option:selected").val();
	if(isNull(userCode)||isNull(password)||isNull(name)||isNull(mobilePhone)||isNull(email)){

		layer.alert("请完善信息！");
	}else{
		var json={
				 userCode:userCode,
				 password:password,
				 name:name,
				 mobilePhone:mobilePhone,
				 email:email,
				 qq:qq,
				 gender:gender,
				 type:role
		 }
		if(role=="STUDENT") {
			if(isNull(classNumber)){
				layer.alert("请完善信息！");
			}else{
				json.classNumber = classNumber;
			}			
		}
		$.ajax({ 
	        type:"POST", 
	        url:CONTEXT_PATH+"user/register", 
	        dataType:"json",      
	        contentType:"application/json",               
	        data:JSON.stringify(json), 
	        success:function(data){ 
	       	 if(data.status=="success"){
	       		 layer.msg("您已经成功注册了，快去登录吧！");
	        	setTimeout(function(){
	        			window.location.href=CONTEXT_PATH+"common/login.jsp";
				}, 1000);
	         		
	         }else{
				 layer.alert(data.message+"  有任何疑问请联系教师!");
	         	  }
	        }
	     });
	}	
}

</script>
</html>